<template>
  <el-menu
    :default-active="$route.path"
    class="sidebar-menu"
    background-color="#304156"
    text-color="#fff"
    active-text-color="#ff6b00"
    :collapse="false"
    :collapse-transition="false">
    
    <el-menu-item index="/">
      <i class="el-icon-s-home"></i>
      <span slot="title">首页</span>
    </el-menu-item>

    <!-- 用户管理模块 -->
    <el-submenu index="/users" v-if="userRole === 'admin'">
      <template slot="title">
        <i class="el-icon-user"></i>
        <span>用户管理</span>
      </template>
      <el-menu-item index="/users/list">
        <span>用户列表</span>
      </el-menu-item>
      <el-menu-item index="/users/roles">
        <span>角色管理</span>
      </el-menu-item>
    </el-submenu>

    <!-- 商品管理模块 -->
    <el-submenu index="/products">
      <template slot="title">
        <i class="el-icon-goods"></i>
        <span>商品管理</span>
      </template>
      <el-menu-item index="/products/list">
        <span>商品列表</span>
      </el-menu-item>
      <el-menu-item index="/products/category">
        <span>商品分类</span>
      </el-menu-item>
    </el-submenu>

    <!-- 销售管理模块 -->
    <el-submenu index="/sales">
      <template slot="title">
        <i class="el-icon-s-order"></i>
        <span>销售管理</span>
      </template>
      <el-menu-item index="/sales/orders">
        <span>订单列表</span>
      </el-menu-item>
      <el-menu-item index="/sales/analysis">
        <span>销售分析</span>
      </el-menu-item>
    </el-submenu>

    <!-- 库存管理模块 -->
    <el-submenu index="/inventory">
      <template slot="title">
        <i class="el-icon-box"></i>
        <span>库存管理</span>
      </template>
      <el-menu-item index="/inventory/stock">
        <span>库存状态</span>
      </el-menu-item>
      <el-menu-item index="/inventory/adjustment">
        <span>库存操作</span>
      </el-menu-item>
      <el-menu-item index="/inventory/in">
        <span>入库管理</span>
      </el-menu-item>
      <el-menu-item index="/inventory/out">
        <span>出库管理</span>
      </el-menu-item>
      <el-menu-item index="/inventory/alert">
        <span>库存预警</span>
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
import { getUserRole } from '@/config/permission'

export default {
  name: 'Sidebar',
  data() {
    return {
      userRole: getUserRole()
    }
  },
  created() {
    // 监听用户信息变化
    window.addEventListener('storage', this.handleStorageChange)
  },
  destroyed() {
    window.removeEventListener('storage', this.handleStorageChange)
  },
  methods: {
    handleStorageChange(e) {
      if (e.key === 'userInfo') {
        this.userRole = getUserRole()
      }
    }
  }
}
</script>

<style scoped>
.sidebar-menu {
  height: 100%;
  border-right: none;
}

.sidebar-menu:not(.el-menu--collapse) {
  width: 250px;
}
</style> 